<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/8/16
  Time: 19:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>订单管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/date/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/sweetalert.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-3.2.1.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/sweetalert.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/table/bootstrap-table.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/date/Moment.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/date/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="panel panel-default">
    <div class="panel-body">
        <form class="form-inline">
            <div class="form-group">
                订单编号：<input id="orderid" name="orderid" type="text" class="form-control" placeholder="搜索内容">
            </div>
            下单日期:
            <div class="input-group input-daterange">
                <input id="ordertime" type="text" class="form-control">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
            <button onclick="search()" type="button" class="btn btn-default">查询</button>
        </form>
    </div>
</div>
<table id="tb"></table>
<div class="panel panel-info" style="display: none;">
    <div class="panel-heading" style="padding-left: 45%;"><strong>订单详情</strong></div>
    <%--<button type="button" class="btn btn-success">清空</button>--%>
    <div class="panel-body">
        <table class="table table-hover" id="order">
            <tr>
                <th>订单编号</th>
                <th>桌号/包间</th>
                <th>消费品</th>
                <th>消费数量</th>
                <th>消费单价</th>
                <th>结账日期</th>
            </tr>
        </table>
    </div>
</div>

</body>
    <script type="text/javascript">
        function search() {
            var opts = $("#table").bootstrapTable('getOptions');
            var ordertime = $("#ordertime").val();
            var orderid = $("#orderid").val();
            $.ajax({
                "url": "${pageContext.request.contextPath}/Order/query",
                "type": "post",
                "data": {
                    "orderid": orderid,
                    "ordertime": ordertime,
                    "pageNumber": 1,
                    "pageSize": 5
                },
                "dataType": "json",
                "success": function (data) {
                    $(".table").bootstrapTable('load', data);
                }
            })
        }

        $("body").dblclick(function(){
            $(".panel-info").css("display","none");
        });

        function queryParams(params) {
            var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                pageSize: params.pageSize,  //页面大小
                pageNumber: params.pageNumber, //页码
                ordertime: $("#ordertime").val(),
                orderid: $("#orderid").val()
            };
            return temp;
        }
        $(function(){

            // 时间插件
            $('#ordertime').datetimepicker({
                //viewMode: 'day',
                format: 'YYYY-MM-DD'
            });
            //订单bootstrap
            $("#tb").bootstrapTable({
                url: '${pageContext.request.contextPath}/Order/query',
                columns: [
                    {
                        field: 'orderid',
                        title: '订单编号',
                        formatter: function (index, row, value) {
                            return row[0].orderid;
                        }
                    }, {
                        title: '桌号/包间',
                        formatter: function (index, row, value) {
                            return row[0].room.roomname;
                        }
                    }, {
                        field: 'ordertime',
                        title: '结账日期',
                        formatter: function (index, row, value) {
                            return row[0].ordertime.substring(0,16);
                        }
                    }, {
                        title: '总金额',
                        formatter:function(index, row, value){
                            return row[1]+"元";
                        }
                    }],
                onClickCell:function(field,$element,row){
                    $.ajax({
                        "url":"${pageContext.request.contextPath}/Order/findById",
                        "type":"post",
                        "data":{"orderid":row[0].orderid},
                        "success":function(data){
                            $(".panel-info").css("display","block");
                            $("#order tr:not(:first)").empty();
                            var arry =[];
                            for(var i=0;i<data.length;i++){
                                arry +="<tr class='empty'><td>"+data[i].orderid+"</td>";
                                arry +="<td>"+data[i].room.roomname+"</td>";
                                arry +="<td>"+data[i].dishes.dishesname+"</td>";
                                arry +="<td>"+data[i].dishesnum+"</td>";
                                arry +="<td>"+data[i].dishes.dishesprice+"</td>";
                                arry +="<td>"+data[i].ordertime.substring(0,16)+"</td>";
                            }
                            $("#order").append(arry);
                        }
                    })
                },
                clickToSelect: true,
                method: 'post',
                contentType: "application/x-www-form-urlencoded",
                height: 294,
                pageList: [5, 10, 15],
                pageSize: 5,
                pageNumber: 1,
                pagination: true,
                queryParamsType: '',
                queryParams: queryParams,
                sidePagination: 'server'
            });
        });
    </script>
</html>
